<!--
 * @Author: your name
 * @Date: 2021-04-29 16:12:07
 * @LastEditTime: 2021-07-20 15:05:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /fytsoa_3.1/admin/src/views/cms/message/index.vue
-->
<template>
  <el-row :gutter="10">
    <el-col
      :xs="5"
      :sm="5"
      :md="5"
      :lg="5"
      :xl="4"
      class="mess-left"
      style="padding-left: 15px"
    >
      <div class="mess-menu">
        <h4>
          <i class="el-icon-receiving"></i>
          消息
          <el-tag effect="dark" type="success" size="mini">
            {{ counts.allCount }}
          </el-tag>
        </h4>
        <ul>
          <li
            v-for="it in menuLi"
            :key="it.id"
            :class="param.status == it.id ? 'active' : ''"
            @click="typeSearch(it)"
          >
            <i :class="it.icon"></i>
            {{ it.name }}
            <el-tag v-if="it.sum > 0" type="danger" effect="dark" size="mini">
              {{ it.sum }}
            </el-tag>
          </li>
        </ul>
      </div>
      <div class="mess-menu">
        <h4 class="tag">
          <i class="el-icon-star-on"></i>
          其他标签
        </h4>
        <ul>
          <li
            v-for="it in tags"
            :key="it"
            :class="param.key == it ? 'active' : ''"
            @click="keySearch(it)"
          >
            <i class="el-icon-star-off"></i>
            {{ it }}
          </li>
        </ul>
      </div>
    </el-col>
    <el-col :xs="19" :sm="19" :md="19" :lg="19" :xl="20" class="mess-right">
      <el-button
        type="primary"
        icon="el-icon-refresh"
        @click="refresh"
      ></el-button>
      <el-button type="primary" icon="el-icon-star-off" @click="allRead">
        全部已读
      </el-button>
      <el-button type="primary" icon="el-icon-star-off" @click="setRead">
        设为已读
      </el-button>
      <el-button type="warning" icon="el-icon-delete" @click="delRecycle">
        删除
      </el-button>
      <el-button type="danger" icon="el-icon-delete" @click="okDeletes">
        彻底删除
      </el-button>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        border
        :data="tableData.items"
        :height="tableAttr.height"
        row-key="id"
        style="margin-top: 10px"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        ></el-table-column>
        <el-table-column
          type="index"
          width="80"
          label="序号"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="消息名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="email"
          label="联系邮箱"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号码"
          min-width="100"
        ></el-table-column>
        <el-table-column prop="isRead" label="已读状态" width="110">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isRead ? 'success' : 'danger'"
              disable-transitions
            >
              {{ scope.row.isRead ? '已读' : '未读' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="summary" label="留言详情" min-width="200">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="300"
              trigger="hover"
              :content="scope.row.summary"
            >
              <span slot="reference">{{ scope.row.summary }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          fixed="right"
        ></el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        :current-page="tableData.currentPage"
        :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.totalItems"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-col>
  </el-row>
</template>
<script>
  import { getList, read, deletes, recycle, total } from '@/api/cms/message'
  export default {
    data() {
      return {
        menuLi: [
          { id: 0, name: '所有消息', icon: 'el-icon-bell', sum: 0 },
          { id: 1, name: '已读消息', icon: 'el-icon-star-off', sum: 0 },
          {
            id: 2,
            name: '未读消息',
            icon: 'el-icon-close-notification',
            sum: 35,
          },
          { id: 3, name: '回收站', icon: 'el-icon-delete', sum: 0 },
        ],
        tags: ['全部', '工作', '通知', '需求', '其它'],
        multipleSelection: [],
        counts: {},
        param: {
          key: '',
          status: '0',
          limit: 10,
          page: 1,
        },
        loading: true,
        tableAttr: {
          height: 300,
        },
        tableData: {},
      }
    },
    created() {
      this.tableAttr.height = window.innerHeight - 245
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        this.loading = true
        const t = await getList(this.param)
        this.tableData = t.data
        this.loading = false
        const c = await total()
        this.counts = c.data
        this.menuLi.forEach((m) => {
          if (m.id == 2) {
            m.sum = c.data.unReadCount
          }
          if (m.id == 3) {
            m.sum = c.data.recycleCount
          }
        })
      },
      typeSearch(m) {
        if (this.param.key == '全部') {
          this.param.key = ''
        }
        this.param.status = m.id
        this.init()
      },
      keySearch(v) {
        if (v == '全部') {
          this.param.key = undefined
        }else{
          this.param.key = v
        }
        this.init()
      },
      refresh() {
        this.init()
      },
      allRead() {
        this.$confirm('确认要全部设置为已读吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          await read({})
          this.init()
        })
      },
      delRecycle() {
        var _this = this
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要删除的项~',
            type: 'warning',
          })
          return
        }
        this.$confirm('确认要删除到回收站选择的消息吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          const res = await recycle(ids.join(','))
          if (res.code == 200) {
            this.$notify({
              message: '删除成功',
              type: 'success',
            })
            _this.init()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      okDeletes() {
        var _this = this
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要彻底删除的项~',
            type: 'warning',
          })
          return
        }
        this.$confirm('确认要执行彻底删除吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          const res = await deletes(ids.join(','))
          if (res.code == 200) {
            this.$notify({
              message: '删除成功',
              type: 'success',
            })
            _this.init()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      setRead() {
        var _this = this
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要设置已读的项~',
            type: 'warning',
          })
          return
        }
        this.$confirm('确认要设置选择消息信息为已读吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          const res = await read({ ids: ids.join(',') })
          if (res.code == 200) {
            this.$notify({
              message: '设置成功',
              type: 'success',
            })
            _this.init()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      handleSizeChange(val) {
        this.param.page = 1
        this.param.limit = val
        this.init()
      },
      handleCurrentChange(val) {
        this.param.page = val
        this.init()
      },
    },
  }
</script>
<style lang="scss" scoped>
  ul,
  li {
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mess-left,
  .mess-right {
    padding: 10px;
  }
  .mess-menu {
    margin-bottom: 20px;
  }
  .mess-menu .el-tag {
    border-radius: 10px !important;
  }
  .mess-menu h4 {
    background-color: #157ffb;
    padding: 12px 20px;
    color: #ffffff;
    margin: 0px;
  }
  .mess-menu h4 .el-tag,
  .mess-menu ul li .el-tag {
    float: right;
    position: relative;
    top: -2px;
  }
  .mess-menu h4.tag {
    background-color: #eaeefc;
    color: #6a707e;
  }
  .mess-menu ul {
    border: 1px solid #f1f1f1;
  }
  .mess-menu ul li {
    line-height: 45px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 20px;
    cursor: pointer;
  }
  .mess-menu ul li .el-tag {
    top: 12px;
  }
  .mess-menu ul li:last-child {
    border-bottom: none;
  }
  .mess-menu ul li.active {
    background-color: #f5f7fa;
  }
</style>
